<template>
  <div class="wrapdiv">
    <el-form :inline="true" class="mysearchform">
      <el-form-item label="组/屏">
        <el-input v-model="query" placeholder="输入屏幕或分组的名称">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doQuery">查询</el-button>
        <!-- :disabled="query ? false : true" -->
      </el-form-item>
    </el-form>
    <el-row>
      <el-col style="padding: 10px">
        <el-button
          type="primary"
          circle
          plain
          icon="el-icon-plus"
          title="添加调度"
          @click="addSchedule"
        ></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :stripe="true"
          :header-cell-style="{ 'text-align': 'center','background-color':'rgba(0,25,150,.1)' }"
          :cell-style="{ 'text-align': 'center' }"
          ref="scheduleTable"
          :data="scheduleListData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column
            label="id"
            width="100"
            show-overflow-tooltip
          >
           <template v-slot="slotscope">
             <span class="myidspan">{{slotscope.row.schedule_id}}</span>
           </template>
          </el-table-column>
          <!--  prop="schedule_type" -->
          <el-table-column width="80" label="类型">
            <template v-slot="slotscope">
              <span
                :style="{
                  color:
                    slotscope.row.schedule_type == 'group' ? 'red' : 'black',
                  'font-weight':
                    slotscope.row.schedule_type == 'group' ? '900' : '400',
                }"
              >
                {{
                  slotscope.row.schedule_type == "group" ? "组任务" : "屏任务"
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="group_name" label="组名"> </el-table-column>
          <el-table-column prop="screen_name" label="屏名"> </el-table-column>

          <el-table-column width="80" label="节目类型">
            <template v-slot="slotscope">
              {{ slotscope.row.resource_type | filter_program_type }}
            </template>
          </el-table-column>
          <el-table-column
            prop="resource_name"
            label="节目名称"
          ></el-table-column>
          <el-table-column width="70" label="时长">
            <template v-slot="slotscope">
              <span
                @dblclick="
                  changeScheduleFieldValueByID(
                    slotscope.row.schedule_id,
                    'delay',
                    slotscope.row.delay
                  )
                "
              >
                {{ slotscope.row.delay }}
              </span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="order"
            width="70"
            label="序号"
          ></el-table-column> -->
          <el-table-column width="70" label="序号">
            <template v-slot="slotscope">
              <span
                @dblclick="
                  changeScheduleFieldValueByID(
                    slotscope.row.schedule_id,
                    'order',
                    slotscope.row.order
                  )
                "
              >
                {{ slotscope.row.order }}
              </span>
            </template>
          </el-table-column>

          <el-table-column width="100" label="开始">
            <template v-slot="slotscope">
              <span
                @dblclick="
                  changeScheduleFieldValueByID(
                    slotscope.row.schedule_id,
                    'begin_time',
                    slotscope.row.begin_time,
                    slotscope.row.end_time
                  )
                "
              >
                {{ slotscope.row.begin_time }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="结束"
          >
          <template v-slot="slotscope">
              <span
                @dblclick="
                  changeScheduleFieldValueByID(
                    slotscope.row.schedule_id,
                    'end_time',
                    slotscope.row.end_time,
                    slotscope.row.begin_time
                  )
                "
              >
                {{ slotscope.row.end_time }}
              </span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="优先级" width="90">
            <template v-slot="slotcope">
              {{ slotcope.row.schedule_level | filter_level }}
            </template>
          </el-table-column> -->
          <el-table-column label="级别" width="90">
            <template v-slot="slotscope">
              <span
                @dblclick="
                  changeScheduleFieldValueByID(
                    slotscope.row.schedule_id,
                    'level',
                    slotscope.row.level
                  )
                "
                :style="style_level(slotscope.row.level)"
              >
                {{ slotscope.row.level | filter_level }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <div>
                <el-button
                  plain 
                  size="small"
                  type="primary"
                  icon="el-icon-edit"
                  @click="edit_schedule(scope.row.schedule_id, scope.row)"
                ></el-button>
                <el-button
                  type="danger"
                  plain
                  size="small"
                  icon="el-icon-delete"
                  @click="delete_schedule(scope.row.schedule_id)"
                ></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col style="padding:10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Schedule_list",
  data() {
    return {
      query: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      scheduleListData: [],
      multipleSelection: [],
    };
  },
  mounted() {
    this.getScheduleByPage();
  },
  methods: {
    async changeScheduleFieldValueByID(
      schedule_id,
      field,
      curValue,
      curBeginOrEndTime
    ) {
      let value;
      if (field == "level") {
        value = curValue == "normal" ? "top" : "normal";
      } else if (field == "order") {
        let resultObj = await this.$prompt(
          "请输入新的序号",
          "提示:序号小的会先播放",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /^\d+$/,
            inputErrorMessage: "请输入整数数字",
          }
        );
        let _value = resultObj.value;
        //console.log(_value);
        _value = +_value;
        if (_value == 0) _value = 1;
        value = _value;
        // console.log(value);
      } else if (field == "delay") {
        let resultObj = await this.$prompt(
          "请输入新的时长(单位:秒)",
          "提示: 必须大于5",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /^\d+$/,
            inputErrorMessage: "请输入整数数字",
          }
        );
        let _value = resultObj.value;
        _value = +_value;
        if (_value < 5) _value = 5;
        value = _value;
      } else if (field == "begin_time" || field == "end_time") {
        let resultObj = await this.$prompt(
          "请输入新的时间(格式:xx:yy)",
          "提示: 09:08 表示 9点零8分",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /^(20|21|22|23|[0-1]\d):[0-5]\d$/,
            inputErrorMessage: "请输入时分",
            inputValue: field == 'begin_time'? '00:00': '23:59'
            // inputValue: curValue.slice(0,5)
          }
        );
        let _value = resultObj.value;
        console.log(_value);
        if (field == "begin_time") {
          _value += ":00";
          if (_value < curBeginOrEndTime) {
            value = _value;
          } else {
            this.$message.error('开始时间必须小于结束时间')
            return;
          }
        } else {
          _value += ":59";
          if (_value > curBeginOrEndTime) {
            value = _value;
          } else {
            this.$message.error('结束时间必须大于开始时间')
            return;
          }
        }
      }

      await this.$http.post("changeScheduleFieldValueByID", {
        schedule_id: schedule_id,
        field: field,
        value: value,
      });

      this.getScheduleByPage();
    },
    async getScheduleByPage() {
      // console.log('this.pageSize',this.pageSize);
      let ret = await this.$http.get(
        `schedules?query=${this.query}&pageNum=${this.pageNum}&pageSize=${this.pageSize}&forShowOnly=true`
      );
      let { total, pageNum, schedules } = ret.data.data;
      console.log(total, pageNum);
      console.log(schedules);
      this.scheduleListData = schedules;
      //console.log('this.scheduleListData = schedules;');
      this.pageNum = pageNum;
      this.total = total;
    },

    style_level(schedule_level) {
      return {
        color: schedule_level == "top" ? "red" : "black",
      };
    },
    addSchedule() {
      this.$router.push("/schedule_edit");
    },
    edit_schedule(id, row) {
      //  true
      //console.log(this.scheduleListData[0] === row);

      // alert("edit =>" + id);
      // 传入 当前行的 数据
      console.log("Schedule_edit", row);

      this.$router.push({
        name: "Schedule_edit",
        params: {
          schedule_info: row,
        },
      });
    },
    async delete_schedule(id) {
      this.$confirm("确认删除此调度计划?")
        .then(async (_) => {
          try {
            let ret = await this.$http.delete(`schedules/${id}`);
            this.$message.success("删除调度成功");
            this.getScheduleByPage();
          } catch (err) {
            this.$message.error("删除调度失败");
          }
        })
        .catch((_) => {});
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getScheduleByPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getScheduleByPage();
    },

    doQuery() {
      // if (this.query) {
      this.getScheduleByPage();
      // }
    },
  },
  filters: {
    filter_level(level) {
      if (level == "top") return ">>紧急<<";
      else return "正常";
    },
    filter_program_type: function (program_type) {
      if (program_type == "picture") {
        return "图片";
      } else if (program_type == "video") {
        return "视频";
      } else if (program_type == "text") {
        return "文本";
      }
    },
  },
};
</script>

<style scoped>
.myidspan{
  white-space: nowrap;
}
.mysearchform {
  background-color: rgba(0,0,0,.1);
  border-radius: 10px;
}
.mysearchform .el-form-item{
  margin: 10px;
}

.wrapdiv{
  width: 98%;
  border-radius: 10px;
  box-shadow: 0 0 10px #aaa;
  padding: 5px;
}
</style>
